.root {
    -fx-font-family: '宋体', 'MingLiU';
}
.main-pane {
    -fx-border-color: -fx-main-border-color;
    -fx-border-width: 0px 1px 0px 0px;
    -fx-border-radius: 3px;
    -fx-background-radius: 3px;
    -fx-effect: dropshadow(three-pass-box, -fx-main-border-color, 20, 1.5, 0, 0);
}

.main-pane .setting-pane {
    -fx-spacing: 20px;
    -fx-padding: 20px 5px 15px 5px;
    -fx-background-color: #140e19;
    -fx-alignment: TOP_CENTER;
}

.main-pane .setting-pane .default-icon {
    -fx-icon-size: 28px;
    -fx-icon-color: -fx-fonticon-color;
}

.main-pane .setting-pane .default-icon:hover {
    -fx-icon-color: -fx-fonticon-hover-color;
}

.main-pane .setting-pane .active {
    -fx-icon-size: 28px;
    -fx-fill: -fx-highlight-color;
}

/**************************************消息面板*****************************************/
.message-pane .control-pane {
    -fx-background-color: -fx-main-background-color;
    -fx-padding: 10px 5px 20px 5px;
}

.message-pane .search-pane {
    -fx-padding: 20px;
    -fx-spacing: 10px;
    -fx-alignment: center-left;
}

.message-pane .search-pane .button {
    -fx-background-color: -fx-main-background-color;
}

.message-pane .search-pane .text-field {
    -fx-background-color: -fx-main-background-color;
    -fx-border-color: lightgray;
    -fx-border-radius: 10px;
    -fx-padding: 6px;
}

.message-pane .search-pane .button:hover {
    -fx-background-color: derive(-fx-main-background-color, 50%);
}

.message-pane .search-pane .ikonli-font-icon {
    -fx-icon-color: black;
}

.message-pane .send-pane .title-pane {
    -fx-padding: 5px 10px 10px 30px;
    -fx-border-color: derive(lightgrey, 50%);
    -fx-border-width: 0px 0px 1px 0px;
}

.message-pane .send-pane .title-pane .ikonli-font-icon {
    -fx-icon-color: -fx-fonticon-color;
}

.message-pane .send-pane .message-list, .message-pane .send-pane .message-list:focused {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.message-pane .send-pane .message-list .label {
    -fx-text-fill: black;
}

.message-pane .send-pane .message-list .list-cell:filled:selected:focused, .message-pane .send-pane .message-list .list-cell:filled:selected {
    -fx-background-color: -fx-main-background-color;
    -fx-text-fill: -fx-selection-list-font-color;
}

.message-pane .send-pane .message-list .list-cell:filled:selected:focused .label, .message-pane .send-pane .message-list .list-cell:filled:selected .label {
    -fx-text-fill: -fx-selection-list-font-color;
}

.message-pane .send-pane .message-list .list-cell:odd {
    /*-fx-cell-hover-color: -fx-main-background-color;*/
    -fx-background-color: -fx-main-background-color;
    /*-fx-padding:2px 1px 2px 5px;*/
    /*-fx-background-color: white;*/
}

.message-pane .send-pane .message-list .list-cell:even {
    /*-fx-cell-hover-color: -fx-main-background-color;*/
    -fx-background-color: -fx-main-background-color;
    /*-fx-padding:2px 1px 2px 5px;*/
}

.message-pane .send-pane .message-list .list-cell:filled:hover {
    /*-fx-cell-hover-color: -fx-main-background-color;*/
    -fx-background-color: -fx-main-background-color;
    /*-fx-text-fill: white;*/
}

/************************************************************************************/
.mitem-pop-pane {
    -fx-background-color: -fx-second-background-color;
    -fx-background-radius: 1;
    -fx-padding:1px;
    -fx-border-color: -fx-main-border-color;
    -fx-border-width: 1;
    -fx-border-radius: 1;
}

.mitem-pop-pane .button {
    -fx-text-fill: -fx-selection-list-font-color;
    -fx-font-size: 18px;
    -fx-background-color: -fx-second-background-color;
    -fx-background-radius: 0;
    -fx-border-width: 0;
    -fx-pref-width: 150px;
    -fx-alignment: CENTER_LEFT;
}

.mitem-pop-pane .button:hover {
    -fx-background-color: derive(-fx-selection-color, 30%);
}

.mitem-pop-pane .separator .line {
    -fx-border-color: -fx-main-border-color;
    -fx-border-width: 1;
}

.message-pane .send-pane {
    -fx-border-color: -fx-main-border-color;
    -fx-border-width: 0 1 0 0;
}

.message-pane .send-pane .scroll-pane {
    -fx-background-color: transparent;
    -fx-control-inner-background: transparent;
}

.message-pane .send-pane .list-view {
    -fx-background-color: transparent;
    -fx-control-inner-background: transparent;
}

.message-pane .send-pane .message-toolbar {
    -fx-background-color: white;
    -fx-padding: 10px 10px 5px 10px;
    -fx-spacing: 10px;
}

.message-pane .send-pane .message-toolbar .ikonli-font-icon {
    -fx-icon-color: -fx-fonticon-color;
    -fx-icon-size: 18px;
}

.message-pane .send-pane .message-toolbar .ikonli-font-icon:hover {
    -fx-icon-color: -fx-second-hover-color;
}

.message-pane .send-pane .text-area {
    -fx-background-color: -fx-second-background-color;
    -fx-border-color: -fx-second-background-color;
    -fx-font-family: Consolas;
    -fx-highlight-fill: derive(-fx-text-area-selection-color, 30%);
    -fx-highlight-text-fill: -fx-second-background-color;
    -fx-text-fill: -fx-second-hover-color;
    -fx-font-size: 18px;
    -fx-control-inner-background: -fx-second-background-color;
}

.message-pane .send-pane .text-area .text {
    -fx-line-spacing: 2px;
}

.message-pane .send-pane .text-area:focused {
    -fx-background-color: -fx-second-background-color;
    -fx-border-color: -fx-second-background-color;
    -fx-control-inner-background: -fx-second-background-color;
    -fx-border-insets: 0px;
}

.message-pane .send-pane .text-area .content, .message-pane .text-area .content:focused {
    -fx-background-color: -fx-second-background-color;
    -fx-control-inner-background: -fx-second-background-color;
}

.message-pane .send-pane .submit-pane {
    -fx-padding: 1px 30px 10px 0px;
    -fx-background-color: -fx-second-background-color;
    -fx-border-color: -fx-main-border-color;
    -fx-border-width: 0px 0px 1px 0px;
}

.message-pane .send-pane .submit-pane .button {
    -fx-padding: 2px 0 0 0;
    -fx-background-color: -fx-main-border-color;
}

.message-pane .send-pane .submit-pane .button:hover {
    -fx-background-color: -fx-highlight-color;
}

.message-pane .message-user-list, .message-pane .message-user-list:focused {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.message-pane .message-user-list .list-cell:filled:selected:focused, .message-pane .message-user-list .list-cell:filled:selected {
    -fx-background-color: derive(gray, 50%);
    /*-fx-text-fill: white;*/
}

.message-pane .message-user-list .list-cell:filled:selected:focused .label, .message-pane .message-user-list .list-cell:filled:selected .label {
    -fx-text-fill: black;
}

.message-pane .message-user-list .list-cell:odd {
    -fx-cell-hover-color: -fx-main-background-color;
    -fx-background-color: -fx-main-background-color;
    /*-fx-padding:5px 1px 5px 5px;*/
    /*-fx-background-color: white;*/
}

.message-pane .message-user-list .list-cell:even {
    -fx-cell-hover-color: -fx-main-background-color;
    -fx-background-color: -fx-main-background-color;
    /*-fx-padding:5px 1px 5px 5px;*/
}

.message-pane .message-user-list .list-cell:filled:hover {
    -fx-cell-hover-color: -fx-main-background-color;
    -fx-background-color: derive(gray, 80%);
    /*-fx-padding:5px 1px 5px 5px;*/
}

.message-pane .message-mitem {
    /*-fx-padding: 5px;*/
}

/*.message-pane .message-mitem:hover {*/
    /*-fx-background-color: derive(gray, 80%);*/
/*}*/
.message-pane .message-mitem .mitem-name {
    -fx-font-size: 18px;
    -fx-font-weight: 600;
    -fx-text-fill: gray;
}

.message-pane .message-mitem .mitem-day, .message-pane .message-mitem .mitem-flow {
    -fx-font-size: 12px;
    -fx-text-fill: derive(gray, 50%);
}

.message-pane .message-box {
    -fx-padding: 5px;
    -fx-background-color: derive(white, 30%);
    -fx-background-radius: 10px;
    -fx-border-radius: 10px;
    -fx-border-color: transparent;
}

.message-pane .message-box:hover {
    -fx-background-color: derive(lightgray, 30%);
    -fx-border-color: lightgray;
}

.web-view {
    -fx-font-scale: 1;
    -fx-pref-width:100％;
    -fx-pref-height:100％;
    -fx-background-color: transparent;
    -fx-border-radius: 5;
    -fx-border-color: gray;
    -fx-background-radius: 5;
    -fx-background-color: white;
}

.web-view:hover {
    -fx-background-color: derive(lightgrey, 50%);
}

.html-editor {
    -fx-background-color: transparent;
    -fx-background-radius: 5px;
    -fx-border-color: transparent;
    -fx-border-radius: 5px;
    -fx-border-width: 0px;
    -fx-border-insets: 0;
}

.html-editor:focused {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-border-width: 0px;
    -fx-border-insets: 0;
}

.emoji-pane {
    -fx-border-color: -fx-main-border-color;
    -fx-border-radius: 5px;
    -fx-background-color: white;
    -fx-background-radius: 5px;
    -fx-padding: 1px 1px 1px 1px;
}

.emoji-pane .flow-pane {
    -fx-background-color: white;
}

/**************************************** user pane *************************************/
.user-pane .control-pane {
    -fx-background-color: -fx-main-background-color;
}

.user-pane .search-pane {
    -fx-padding: 20px;
    -fx-spacing: 10px;
    -fx-alignment: center-left;
}

.user-pane .search-pane .button {
    -fx-background-color: -fx-main-background-color;
}

.user-pane .search-pane .text-field {
    -fx-background-color: -fx-main-background-color;
    -fx-border-color: lightgray;
    -fx-border-radius: 10px;
    -fx-padding: 6px;
}

.user-pane .search-pane .button:hover {
    -fx-background-color: derive(-fx-main-background-color, 50%);
}

.user-pane .search-pane .ikonli-font-icon {
    -fx-icon-color: black;
}

.user-pane .user-list, .message-pane .user-list:focused {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.user-pane .user-list .list-cell:filled:selected:focused, .user-pane .user-list .list-cell:filled:selected {
    -fx-background-color: transparent;
    /*-fx-text-fill: white;*/
}

.user-pane .user-list .list-cell:filled:selected:focused .label, .user-pane .user-list .list-cell:filled:selected .label {
    -fx-text-fill: black;
}

.user-pane .user-list .list-cell:odd {
    -fx-cell-hover-color: -fx-main-background-color;
    -fx-background-color: -fx-main-background-color;
    -fx-padding:2px 1px 2px 5px;
    /*-fx-background-color: white;*/
}

.user-pane .user-list .list-cell:even {
    -fx-cell-hover-color: -fx-main-background-color;
    -fx-background-color: -fx-main-background-color;
    -fx-padding:2px 1px 2px 5px;
}

.user-pane .user-list .list-cell:filled:hover {
    -fx-cell-hover-color: -fx-main-background-color;
    -fx-background-color: derive(gray, 80%);
    /*-fx-text-fill: white;*/
}

.user-pane .user-tree-view {
    -fx-background-color: -fx-main-background-color;
    -fx-border-color: -fx-main-background-color;
}

.user-pane .user-tree-view:focused {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.user-pane .user-tree-view .tree-cell {
    -fx-background-color: -fx-main-background-color;
    /*-fx-padding: 10px;*/
    -fx-font-size: 17px;
}

.user-pane .user-tree-view .tree-cell:selected {
    -fx-background-color: derive(gray, 50%);
}

/*.user-pane .user-tree-view .tree-cell:selected .label {*/
    /*-fx-text-fill: black;*/
/*}*/

.user-pane .user-tree-view .label {
    -fx-font-size: 17px;
}

/***********************************************************************************************************/
.user-info-pane .text-field {
    -fx-font-size: 18px;
    -fx-background-color: transparent;
}

.user-info-pane .label {
    -fx-text-fill: derive(gray, 30%);
    -fx-font-size: 17px;
}


/*******************************************************************************************************/
.setting-popup-pane {
    -fx-background-color: -fx-setting-pane-color;
    -fx-padding:1px;
}

.setting-popup-pane .button {
    -fx-text-fill: -fx-main-font-color;
    -fx-font-size: 18px;
    -fx-background-color: -fx-setting-pane-color;
    -fx-background-radius: 0;
    -fx-border-width: 0;
    -fx-pref-width: 150px;
    -fx-alignment: CENTER_LEFT;
}

.setting-popup-pane .button:hover {
    -fx-background-color: derive(-fx-setting-pane-color, 30%);
}


/*****************************************************************************************************/
.message-list-pane {
    -fx-padding: 5px 1px 5px 1px;
}

.message-list-pane .scroll-pane {
    -fx-hbar-policy:never;
    -fx-background-insets: 0;
    -fx-padding: 0;
}

.message-list-pane .scroll-pane:focused {
    -fx-background-insets: 0;
}

.message-list-pane .scroll-pane > .viewport {
    -fx-background-color: transparent;
}

.message-list-pane .text-message {
    -fx-padding: 0;
    -fx-background-insets: 0;
    -fx-focus-color: transparent;
    -fx-border-style: none;
    -fx-border-color: derive(gray, 60%);
    -fx-background-radius: 1px;
    -fx-border-radius: 1px;
    -fx-font-size: 12px;
    -fx-background-color: rgba(255, 255, 255, 0.06);
}

.message-list-pane .text-message .content {
    -fx-background-color: rgba(255, 255, 255, 0.04);
}

.message-list-pane .text-message:hover .content {
    -fx-background-color: #d3d3d3;
}

.message-list-pane .text-message:focused .content {
    -fx-background-color: #d3d3d3;
}

.message-list-pane .text {
    -fx-border-width:  1px;
    -fx-border-color: gray;
    -fx-border-radius: 2px;
}

.message-list-pane .im-text-pane {
    -fx-padding: 5px 2px 2px 2px;
    /*-fx-border-color: derive(gray, 40%);*/
    -fx-border-radius: 2px;
    -fx-background-radius: 2px;
    -fx-background-color: white;
}

.message-list-pane .im-text-area .content {
    -fx-padding: 5.0 5.0 5.0 5.0;
}

.message-list-pane .im-text-area {
    -fx-padding: 5.0 5.0 5.0 5.0;
}

.message-list-pane .im-text-area:hover {
    -fx-background-color: #d3d3d3;
}

/****************************************************************************************/
.im-popup {
    -fx-background-color: white;
    -fx-border-color: gray;
    -fx-max-width: 80px;
    -fx-padding: 2px 0px 2px 0px;
}

.im-popup .button {
    -fx-max-width: 80px;
    -fx-min-width: 80px;
}

.im-popup .separator {
    -fx-padding: 0px;
}